<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no" />
		<title>愉直播</title>
		<link rel="stylesheet" type="text/css" href="../c/aui.css" />
		<style>
			.sx-close img{
	width: 1rem;
}
.sx-add-title{
	padding-top: 1rem;
	position: relative;
	padding-bottom: 0.5rem;
}
.sx-add-title input{
	padding: 0 0.75rem;
	margin-right: 1rem;
	padding-right: 2.75rem;
	background: #222;
	color: #fff;

}
.sx-add-title i{
	position: absolute;
	top: 1.2rem;
	right: 0.75rem;
	color: #CACACA;
	font-weight: bold;
	font-size: 1.2rem;
}
.sx-add-tags{
	border: 1px solid #F95859;
	display: inline-block;
	border-radius: 3rem;
	color: #F95859;
	padding: 0.2rem 0.75rem;
	font-size: 0.75rem;
	margin-top: 0.75rem;
}
.sx-add-tags span.aui-icon-right{
	font-weight: bold;
	font-size: 0.6rem;
	padding-left: 0.1rem;
}

.sx-add-img{
	margin-top: 1.5rem;
}
.sx-add-img h2{
	font-size: 0.85rem;
	color: #fff;
}
.sx-add-img-s div,.sx-add-img-s div img{
	background:#222 url('../i/zhibo/sx-add-img-s.png') no-repeat center center;
	background-size:2rem;
	height:7.5rem;
	position: relative;
	border-radius: 0.5rem;
}
.sx-add-img-s div img{
	width: 100%;
}
.sx-add-img-s div.sx-add-img-l{
	width: 70%;
}
.sx-add-img-s div.sx-add-img-r{
	width: 25%;
}
.sx-add-img-s div p{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color:rgba(0,0,0,0.4);
	color: #fff;
	text-align: center;
	padding: 0.2rem 0;
	border-bottom-left-radius:0.35rem;
	border-bottom-right-radius:0.5rem;
	font-size: 0.65rem;
	padding: 0.25rem 0;
}
.sx-btn{
	background: #FE2C55;
	color: #fff;
	font-weight: bold;
	margin-top: 2rem;
}
.sx-btn:active{
	background: #890505;
	color: #fff;
}
.sx-add-img .aui-card-list-footer{
	padding: 0.75rem 0;
}
</style>
	</head>
	<body>
		<div class="aui-content-padded">
			<!-- <div class="sx-close" Tapmode onclick="_close();">
				<img src="../i/x.png"  />
			</div> -->
			<div class="sx-add-title">
				<input type="text" placeholder="标题有趣能吸引更多人气" value="" />
				<i class="aui-iconfont aui-icon-question" tapmode onclick="_page('直播规则',4)"></i>
			</div>
			<div class="sx-add-tags" data-id="" data-title="" tapmode onclick="type()">
				选择分类 <span class="aui-iconfont aui-icon-right"></span>
			</div>
			<div class="sx-add-img">
				<h2>上传封面</h2>
				<div class="sx-add-img-s aui-card-list-footer">
					<div class="sx-add-img-l" tapmode onclick="img(1)">
						<img src="" style="display: none" data-url="" />
						<p>
							横版封面
						</p>
					</div>
					<div class="sx-add-img-r" tapmode onclick="img(2)">
						<img src="" style="display: none" data-url="" />
						<p>
							竖版
						</p>
					</div>
					<!--
					<img class="sx-add-img-l" src="../../image/zhibosx-add-img-r.png" />
					<img class="sx-add-img-r" src="../../image/zhibo/sx-add-img-r.png" />-->
				</div>
			</div>
			<div class="sx-btn aui-btn aui-btn-block" tapmode onclick="url();">
				开始直播
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../j/api.js"></script>
	<script type="text/javascript">
		var type_id;
		apiready = function() {
			api.parseTapmode();
			info();
			// $api.fixStatusBar($api.dom('.aui-content-padded'));
			api.addEventListener({
				name: 'viewappear'
			}, function(ret, err) {
				// alert("ss");

				type_id = localStorage.getItem("zhiboId");
				$('.sx-add-tags span').text(localStorage.getItem("zhiboTitle"));
			});
		}
		// 读取信息
		function info() {
			_loading();
			_ajax('zhibo/info', function(ret, err) {
				if (ret) {
					//	console.log(JSON.stringify(ret));
					if (ret.ret) {
						var ret = ret.ret;
						$('input').val(ret.roomName);
						var _this = $('.sx-add-img-l img');
						_this.data('url', ret.img_l);
						_this.attr('src', _sx_qiniu + ret.img_l);
						_this.show();
						_this = $('.sx-add-img-r img');
						_this.data('url', ret.img_r);
						_this.attr('src', _sx_qiniu + ret.img_r);
						_this.show();
						_this = $('.sx-add-tags');
						// _this.data('id', ret.type_id);
						type_id = ret.type_id
						_this.data('title', ret.type_title);
						$('.sx-add-tags span').text(ret.type_title);
						// _this.html(ret.type_title + '<span class="aui-iconfont aui-icon-right"></span>');
					}
				} else {
					_alert(JSON.stringify(err))
				}
				_loadingCloes();
			})
		}
		// 打开分类
		function type() {
			_url({
				url: 'zhibo_type_add',
				title: '直播分类',
				bounces: 1,
				fan: 1,
				type_title: $('.sx-add-tags').data('title')
			})
		}

		function url() {
			var input = $('input').val();
			if (!input) {
				return _msg('请输入直播标题');
			}
			if (input.length < 3) {
				alert('不能少于3个字')
				return
			}
			if (!type_id) {
				return _msg('选择分类')
			}
			var img_l = $('.sx-add-img-l img').css('display');
			if (img_l == 'none') {
				return _msg('请上传横版封面')
			}
			var img_r = $('.sx-add-img-r img').css('display');
			if (img_r == 'none') {
				return _msg('请上传竖版封面')
			}
			add();
		}

		function add() {
			var img_l = $('.sx-add-img-l img').data('url');
			if (!img_l) {
				return imgAjax(1);
			}
			var img_r = $('.sx-add-img-r img').data('url');
			if (!img_r) {
				return imgAjax(2);
			}
			var data = {
				roomName: $('input').val(),
				type_id: type_id,
				img_l: img_l,
				img_r: img_r,
			}
			_loading();
			// 提交
			_ajax('zhibo/CreateRoom', function(ret, err) {
				console.log(JSON.stringify(ret));
				_loadingCloes();
				if (ret) {
					if (ret.ret) {
						ret = ret.ret;
						console.log(JSON.stringify(ret));
						_zurl(ret);
					} else {
						_alert(ret.msg)
					}
				} else {
					_alert(JSON.stringify(err))
				}

			}, data)
		}
		// 选择图片上传
		function img(type) {
			var sourceType = 'album'
			api.getPicture({
				sourceType: sourceType,
				encodingType: 'jpg',
				mediaValue: 'pic',
				destinationType: 'url',
				quality: 50,
				targetWidth: 800,
				targetHeight: 800,
			}, function(ret, err) {
				if (ret) {
					if (ret.data) {
						var _this = type == 2 ? $('.sx-add-img-r img') : $('.sx-add-img-l img');
						// console.log("type"+type+" ret:"+ret.data)
						_this.data('url', "");
						_this.attr('src', ret.data);
						_this.show();
						imgAjax(type);
						// console.log(_this.data('url'))
					}
				}
			});
		}
		// 封装上次图片方法
		function imgAjax(type) {
			var _this = type == 2 ? $('.sx-add-img-r img') : $('.sx-add-img-l img');
			var image = _this.attr('src');
			_loading('正在上传中');
			_qiniu(image, function(ret, err) {
				if (ret.status) {
					console.log(JSON.stringify(ret));
					if (ret.oper == "complete") {
						_loadingCloes();
						//上传成功后组装访问路径，或直接访问文档
						var img = ret.info.key;
						_this.data('url', img);
						_msg('上传成功');
					} else if (ret.oper == "progress") {
						//上传过程中获取进度数据
					}
				} else {
					_loadingCloes();
					console.log(JSON.stringify(err));
				}
			})
		}
		// 打开直播
		function _zurl(data) {
			var name = 'zhibo_view_win';
			api.openWin({
				name: name,
				url: _h_w + name + '.html',
				bounces: false,
				//	pageParam : pageParam,
				reload: true,
				allowEdit: true,
				slidBackEnabled: false,
				pageParam: data,
				animation: {
					type: "fade", //动画类型（详见动画类型常量）
					subType: "from_right", //动画子类型（详见动画子类型常量）
					duration: 300
				},
			});
		}
	</script>
</html>
